<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

import LangSwitch from "@/components/LangSwitch.vue";
import SliderVerify from "@/components/SliderVerify.vue";

const getAssetsFile = (url) => {
  return new URL(`/public/img/${url}.png`, import.meta.url).href;
};
const router = useRouter();
const text1 = ref(t("robotXZ"));
const text2 = ref(`${t("welcome")}!`);
const navList = ref([
  {
    index: 0,
    title: "caseFiling",
    src: "wylian",
    type: "web",
    pageUrl: "https://new.gzac.org/secretary/login?type=litigant&source=robot",
  },
  {
    index: 1,
    title: "leaveAMessage",
    src: "liuyan",
    type: "ly",
  },
  {
    index: 2,
    title: "consultation",
    src: "wyzx",
    type: "zx",
  },
  {
    index: 3,
    title: "circleFriends",
    src: "gzpyq",
    type: "photo",
    listKey: "pyq",
  },
  {
    index: 4,
    title: "3N",
    src: "3ntingshi",
    type: "photo",
    listKey: "3n",
  },
  {
    index: 5,
    title: "odr",
    src: "odrpt",
    type: "video",
    listKey: "odr",
  },
  {
    index: 6,
    title: "arbitrationDay",
    src: "gzczr",
    type: "video",
    listKey: "zcr",
  },
  {
    index: 7,
    title: "promoVideo",
    src: "xcsp",
    type: "video",
    listKey: "xc",
  },
]);
const show = ref(false);

onMounted(async () => {});

const handleClick = (i) => {
  if (navList.value[i].type === "photo") {
    router.push({
      path: `/photo/${navList.value[i].listKey}`,
    });
  } else if (navList.value[i].type === "video") {
    router.push({
      path: `/video/${navList.value[i].listKey}`,
    });
  } else if (navList.value[i].type === "frame") {
    router.push({
      path: `/frame/${navList.value[i].listKey}`,
    });
  } else if (navList.value[i].type === "ly") {
    router.push({
      path: `/message`,
    });
  } else if (navList.value[i].type === "zx") {
    router.push({
      path: `/askingList`,
    });
  } else if (navList.value[i].type === "web") {
    window.open(navList.value[i].pageUrl, "_blank");
  }
};
</script>

<template>
  <div class="home">
    <lang-switch class="langSwitch"></lang-switch>
    <div class="topBanner">
      <img src="/public/img/logo.png" alt="" />
    </div>
    <div class="topText">
      <div class="text1">{{ $t("robotXZ") }}</div>
      <div class="text2">{{ $t("welcome") }}!</div>
    </div>
    <div class="main">
      <div class="robotBox">
        <img class="robot" src="/public/img/mobile/robot-Q.png" alt="" />
        <div
          v-for="(item, index) in navList"
          :key="index"
          :class="['bubble', 'bubble' + index]"
          @click="handleClick(index)"
        >
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ t(item.title) }}</span>
        </div>
        <!-- <div class="bubble bubble0" @click="handleClick(0)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("caseFiling") }}</span>
        </div>
        <div class="bubble bubble1" @click="handleClick(1)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("leaveAMessage") }}</span>
        </div>
        <div class="bubble bubble2" @click="handleClick(2)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("consultation") }}</span>
        </div>
        <div class="bubble bubble3" @click="handleClick(3)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("circleFriends") }}</span>
        </div>
        <div class="bubble bubble4" @click="handleClick(4)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("3N") }}</span>
        </div>
        <div class="bubble bubble5" @click="handleClick(5)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("odr") }}</span>
        </div>
        <div class="bubble bubble6" @click="handleClick(6)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("arbitrationDay") }}</span>
        </div>
        <div class="bubble bubble7" @click="handleClick(7)">
          <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
          <span class="bubbleText">{{ $t("promoVideo") }}</span>
        </div> -->
      </div>
    </div>

    <van-popup class="popup" v-model:show="show" round>
      <slider-verify></slider-verify>
    </van-popup>
  </div>
</template>

<style lang="less" scoped>
.home {
  height: 100%;
  background: url("/public/img/mobile/bg.png") no-repeat bottom center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .langSwitch {
    position: fixed;
    top: 20px;
    right: 10px;
  }
  .topBanner {
    height: 76px;
    padding: 10px;
    box-sizing: border-box;
    img {
      width: 200px;
    }
  }
  .topText {
    flex: 1;
    color: #fff;
    font-weight: 600;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media only screen and (max-height: 800px) {
      max-height: 79px;
    }
    .text1 {
      font-size: 16px;
      margin-bottom: 16px;
    }
    .text2 {
      font-size: 32px;
    }
  }
  .main {
    flex: 4;
    position: relative;
    // overflow: hidden;
    .robotBox {
      width: 124px;
      height: 260px;
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translate(-50%, 0%);
      .robot {
        width: 124px;
        height: 260px;
      }
      .bubble {
        width: 110px;
      }
      .bubbleText {
        width: 84px;
        font-size: 15px;
        color: #fff;
        text-align: center;
        line-height: 18px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .bubble0 {
        position: absolute;
        left: -55px;
        top: -170px;
      }
      .bubble1 {
        position: absolute;
        left: -120px;
        top: -72px;
      }
      .bubble2 {
        position: absolute;
        left: -120px;
        top: 46px;
      }
      .bubble3 {
        position: absolute;
        left: -100px;
        top: 160px;
      }

      .bubble4 {
        position: absolute;
        right: -100px;
        top: 160px;
      }
      .bubble5 {
        position: absolute;
        right: -120px;
        top: 46px;
      }
      .bubble6 {
        position: absolute;
        right: -120px;
        top: -72px;
      }
      .bubble7 {
        position: absolute;
        right: -55px;
        top: -170px;
      }
    }
  }
  .popup {
    width: 90%;
    height: 50%;
    padding: 20px;
  }
}
</style>
<style lang="less">
.toastWidth {
  width: unset;
  min-width: var(--van-toast-default-width);
}
</style>
